<template>
  <view class="search">
    <view class="search-input">
      <u-search
        @search="search"
        @custom="search"
        placeholder="输入搜索内容"
        v-model="keyword"
      ></u-search>
    </view>
    <view class="search-history" v-if="isLogin">
      <view class="top">
        <view>
          历史搜索
          <u-button
            style="margin-left: 20rpx"
            type="primary"
            size="mini"
            @click="initHistory({ all: 1 })"
            >显示全部</u-button
          >
        </view>
        <u-icon name="trash" @click="delAll" />
      </view>
      <view class="bd">
        <template v-for="item in list">
          <!-- <view class="bd-item" :key="count"> 12312 </view> -->
          <u-tag
            style="margin-right: 10rpx"
            :key="item.id"
            :index="item.id"
            :text="item.name"
            closeable
            @click="tagClick"
            @close="tagClose"
          />
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { searchHistory, searchDel, searchGoods } from "@/utils/api";
export default {
  data() {
    return {
      keyword: "",
      list: [],
      isLogin: false,
    };
  },
  onLoad() {
    uni.getStorageSync("token") && (this.isLogin = true);
  },
  onShow() {
    this.isLogin && this.initHistory();
  },
  methods: {
    search() {
      searchGoods({
        text: this.keyword,
      }).then((resp) => {
        console.log("搜索结果", resp);
        if (resp.code == 200) {
          const { total } = resp.data;
          if (total > 0) {
            uni.navigateTo({
              url: "/pages/third/third?type=search&id=" + this.keyword,
              success: () => {
                this.keyword = "";
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "当前关键词下无对应商品！",
            });
          }
        }
      });
    },
    initHistory(data = {}) {
      searchHistory(data).then((resp) => {
        console.log("历史搜索", resp);
        if (resp.code == 200) {
          this.list = resp.data;
        }
      });
    },
    tagClick(id) {
      let arr = this.list.filter((item) => item.id == id);
      let keyword = arr[0].name;
      searchGoods({
        text: keyword,
      }).then((resp) => {
        console.log("搜索结果", resp);
        if (resp.code == 200) {
          const { total } = resp.data;
          if (total > 0) {
            uni.navigateTo({
              url: "/pages/third/third?type=search&id=" + keyword,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "当前关键词下无对应商品！",
            });
          }
        }
      });
    },
    tagClose(id) {
      searchDel({ id }).then((resp) => {
        console.log("删除历史搜索", resp);
        if (resp.code == 200) {
          this.list.map((item, index) => {
            if (item.id == id) {
              this.list.splice(index, 1);
              return "";
            }
          });
        }
      });
    },
    // 显示全部
    showAll() {},
    // 删除所有历史搜索
    delAll() {
      if (this.list.length > 0) {
        searchDel({ all: 1 }).then((resp) => {
          console.log("删除历史搜索", resp);
          if (resp.code == 200) {
            this.list = [];
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.search {
  @include wrapper;
  &-input {
    margin: 20rpx 0;
  }
  &-history {
    .top {
      @include flex;
      line-height: 60rpx;
      font-size: 28rpx;
    }
    .bd {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      &-item {
        background-color: #e5e5e5;
        padding: 0 20rpx;
        line-height: 40rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
